import React from 'react';
import { Button, Input, message } from 'antd';
import ReactJson from 'react-json-view';

class JsonAnswer extends React.Component{

  /* 返回富文本编辑 */
  backToRich = () => {
    const { typeOfAnswer,answerIndex,paneIndex,answer } = this.props;
    //默认答案
    let newAnswer = {}
    if(typeOfAnswer === 'default'){
      newAnswer = {...answer,answerType:'richText'}
      this.props.updateJsonAnswer(newAnswer,answerIndex,paneIndex)
    }else {
      this.props.updateJsonAnswer('backToRich')
    }
  }

  /* 编辑json */
  onEditJson = (e) => {
    const { typeOfAnswer,answerIndex,paneIndex,answer } = this.props;
    //默认答案
    let newAnswer = {}
    if(typeOfAnswer === 'default'){
      newAnswer = {...answer,jsonContent:e.target.value}
      this.props.updateJsonAnswer(newAnswer,answerIndex,paneIndex)
    }else {
      this.props.updateJsonAnswer('update',e.target.value)
    }
  }

  /* 新增json字段 */
  onAddJson = (add) => {
    const { typeOfAnswer,answerIndex,paneIndex,answer } = this.props;
    //默认答案
    let newAnswer = {}
    if(typeOfAnswer === 'default'){
      newAnswer = {...answer,jsonContent:add.updated_src}
      this.props.updateJsonAnswer(newAnswer,answerIndex,paneIndex)
    }else {
      this.props.updateJsonAnswer('update',add.updated_src)
    }

    /* 只有params中才能新增字段 */
    if(add.name != "params"){
      this.dealtWithJson(add.existing_src,'请在params中新增字段')
    }
  }

  /* 删除json字段 */
  onDeleteJson = (del) => {
    const { typeOfAnswer,answerIndex,paneIndex,answer } = this.props;
    //默认答案
    let newAnswer = {}
    if(typeOfAnswer === 'default'){
      newAnswer = {...answer,jsonContent:del.updated_src}
      this.props.updateJsonAnswer(newAnswer,answerIndex,paneIndex)
    }else {
      this.props.updateJsonAnswer('update',del.updated_src)
    }

    /* 处理特定字段不能删除 */
    if(del.namespace.length < 2){
      this.dealtWithJson(del.existing_src,'该字段不能删除')
    }
  }

  dealtWithJson = (jsonContent,msg) =>  {
    const { typeOfAnswer,answerIndex,paneIndex,answer } = this.props;
    //默认答案
    let newAnswer = {}
    message.error(msg)
    setTimeout(() => {
      if(typeOfAnswer === 'default'){
        newAnswer = {...answer,jsonContent}
        this.props.updateJsonAnswer(newAnswer,answerIndex,paneIndex)
      }else {
        this.props.updateJsonAnswer('update',jsonContent)
      }
    },300)

  }

  render() {
    const { jsonContent } = this.props;
    return (
      <div>
        <div style={{textAlign:'right',background:'#F2F2F2'}}>
          <Button icon={'form'} type={'link'} size={'small'} onClick={() => this.backToRich()}>返回富文本编辑</Button>
        </div>
        <div style={{border:'1px solid #F2F2F2',padding:10,overflowY:'auto'}}>
          <Input.TextArea value={jsonContent} rows={15} onChange={this.onEditJson} />
          {/*<ReactJson*/}
          {/*  validationMessage={'操作失败'}*/}
          {/*  name={null}*/}
          {/*  displayObjectSize={false}*/}
          {/*  displayDataTypes={true}*/}
          {/*  collapseStringsAfterLength={true}*/}
          {/*  src={jsonContent}*/}
          {/*  onEdit={(edit) => this.onEditJson(edit)}*/}
          {/*  onAdd={(add) => this.onAddJson(add)}*/}
          {/*  onDelete={(del) => this.onDeleteJson(del)}*/}
          {/*/>*/}
        </div>

      </div>
    );
  }
}

export default JsonAnswer
